<template>
  <v-dialog max-width="800" :model-value="modelValue" persistent @update:model-value="handleClose">
    <v-card>
      <v-card-title class="d-flex align-center">
        <v-icon class="mr-2" :icon="mdiNoteText" />
        {{ isEditing ? t('editNote') : t('createNote') }}
        <v-spacer />
        <v-btn :icon="mdiClose" variant="text" @click="handleClose" />
      </v-card-title>

      <v-divider />

      <v-card-text class="pt-4">
        <v-form ref="formRef" @submit.prevent="handleSubmit">
          <!-- 笔记类型 -->
          <v-select
            v-if="isEditing"
            v-model="formData.type"
            disabled
            item-title="label"
            item-value="value"
            :items="noteTypes"
            :label="t('type.label')"
            :prepend-icon="mdiShape"
            variant="outlined"
          />

          <!-- 内容 -->
          <v-textarea
            v-model="formData.content"
            auto-grow
            clearable
            :label="t('contentLabel')"
            :placeholder="t('contentPlaceholder')"
            :prepend-icon="mdiTextBox"
            required
            :rows="6"
            variant="outlined"
          />

          <!-- 标签 -->
          <v-combobox
            v-model="formData.tags"
            chips
            clearable
            closable-chips
            :label="t('tagsLabel')"
            multiple
            :placeholder="t('tagsPlaceholder')"
            :prepend-icon="mdiTag"
            variant="outlined"
          />
        </v-form>
      </v-card-text>

      <v-divider />

      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="handleClose">
          {{ t('cancel') }}
        </v-btn>
        <v-btn color="primary" variant="elevated" @click="handleSubmit">
          {{ isEditing ? t('save') : t('create') }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { mdiClose, mdiNoteText, mdiShape, mdiTag, mdiTextBox } from '@mdi/js'
import type { Note, NoteType } from '../types'

const props = defineProps<{
  modelValue: boolean
  note?: Note | null
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  save: [data: any]
  close: []
}>()

const { t } = useI18n()
const formRef = ref()

// 是否为编辑模式
const isEditing = computed(() => !!props.note)

// 笔记类型选项
const noteTypes = computed(() => [
  { label: t('type.note'), value: 'note' },
  { label: t('type.email'), value: 'email' },
  { label: t('type.event'), value: 'event' },
  { label: t('type.other'), value: 'other' }
])

// 表单数据
const formData = ref({
  type: 'note' as NoteType,
  content: '',
  tags: [] as string[]
})

// 监听 note 变化，初始化表单
watch(
  () => props.note,
  newNote => {
    if (newNote) {
      formData.value = {
        type: newNote.type,
        content: newNote.content,
        tags: newNote.tags || []
      }
    } else {
      resetForm()
    }
  },
  { immediate: true }
)

// 重置表单
function resetForm() {
  formData.value = {
    type: 'note',
    content: '',
    tags: []
  }
}

// 处理提交
async function handleSubmit() {
  // 验证表单
  if (!formData.value.content.trim()) {
    return
  }

  // 提交数据
  emit('save', {
    ...formData.value
  })
}

// 处理关闭
function handleClose() {
  emit('update:modelValue', false)
  emit('close')
  resetForm()
}
</script>

<i18n>
{
  "zhHans": {
    "createNote": "添加记录",
    "editNote": "编辑记录",
    "type": {
      "label": "记录类型",
      "note": "记录",
      "email": "邮件",
      "event": "事件",
      "other": "其他"
    },
    "titleLabel": "标题",
    "titlePlaceholder": "输入记录标题（可选）",
    "contentLabel": "内容",
    "contentPlaceholder": "输入记录内容...",
    "companyLabel": "关联公司",
    "companyPlaceholder": "输入公司名称",
    "contactLabel": "关联联系人",
    "contactPlaceholder": "输入联系人姓名",
    "tagsLabel": "标签",
    "tagsPlaceholder": "添加标签",
    "pinToTop": "置顶此记录",
    "create": "创建",
    "save": "保存",
    "cancel": "取消"
  },
  "en": {
    "createNote": "Add Entry",
    "editNote": "Edit Entry",
    "type": {
      "label": "Entry Type",
      "note": "Entry",
      "email": "Email",
      "event": "Event",
      "other": "Other"
    },
    "titleLabel": "Title",
    "titlePlaceholder": "Enter entry title (optional)",
    "contentLabel": "Content",
    "contentPlaceholder": "Enter entry content...",
    "companyLabel": "Related Company",
    "companyPlaceholder": "Enter company name",
    "contactLabel": "Related Contact",
    "contactPlaceholder": "Enter contact name",
    "tagsLabel": "Tags",
    "tagsPlaceholder": "Add tags",
    "pinToTop": "Pin this entry",
    "create": "Create",
    "save": "Save",
    "cancel": "Cancel"
  }
}
</i18n>
